<template>
	<div class="shiJbox">
		<div class="mask" :style="{ height: evieHeight}"></div>
		<div class="shiJ">
			<div class="tis">
				<div class="cancel" @click="quX">取消</div>
				<div class="sure" @click="queD">确定</div>
			</div>
			<picker-view
				:value="value1"
				indicator-style="height: 50px;"
				style="width: 100%; height: 200px;"
				@change="bindChange"
			>
				<picker-view-column>
					<view v-for="(item,index) in years" :key="index" style="line-height: 50px;font-size:28rpx;">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in months" :key="index" style="line-height: 50px;font-size:28rpx;">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in days" :key="index" style="line-height: 50px;font-size:28rpx;">{{item}}日</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in Hours" :key="index" style="line-height: 50px;font-size:28rpx;">{{item}}时</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in Minutes" :key="index" style="line-height: 50px;font-size:28rpx;">{{item}}分</view>
				</picker-view-column>
			</picker-view>
		</div>
	</div>
</template>

<script>
export default {
	props: ['message'],
	components: {},
	data() {
		return {
		//默认选中值
		value1: "",
		//当前月份天数
		tianS: "",
		//默认或则选择的月份
		yue: "",
		year: "",
		Month: "",
		Date: "",
		Hour: "",
		Minute: "",
		years: [],
		months: [],
		days: [],
		Hours: [],
		Minutes: [],
		//确定时间
		dqshijian: '',
		shiJc:'',
		evieHeight:"",
		};
	},

	created() {
		this.year = new Date().getFullYear();
		this.Month = new Date().getUTCMonth() + 1;
		this.Date = new Date().getUTCDate();
		this.Hour = new Date().getHours();
		this.Minute = new Date().getMinutes();
		this.dqshijian =   this.year+'年'+this.Month+'月'+this.Date+'日'+this.Hour+'时'+this.Minute+'分'
		// this.shiJc = this.year+'-'+this.Month+'-'+this.Date+' '+this.Hour+':'+this.Minute
		var getSystemType = wx.getSystemInfoSync();
			if(getSystemType.platform == "android"){
				this.shiJc = this.year+'-'+this.Month+'-'+this.Date+' '+this.Hour+':'+this.Minute
			}else{
				this.shiJc = this.year+'/'+this.Month+'/'+this.Date+' '+this.Hour+':'+this.Minute
			}

		//获取当月天数
		this.yue = this.Month;
		this.tianS = new Date(this.year, this.yue, 0).getDate();
		console.log(this.tianS);
		for (let i = 2019; i < 2100; i++) {
			this.years.push(i);
		}
		for (let i = 1; i < 13; i++) {
			if (i < 10) {
				this.months.push(i);
			} else {
				this.months.push(i);
			}
		}
		for (let i = 1; i < this.tianS + 1; i++) {
			if (i < 10) {
				this.days.push( i);
			} else {
				this.days.push(i);
			}
		}
		for (let i = 0; i < 24; i++) {
			if (i < 10) {
				this.Hours.push( i);
			} else {
				this.Hours.push(i);
			}
		}
		for (let i = 0; i < 60; i++) {
			if (i < 10) {
				this.Minutes.push( i);
			} else {
				this.Minutes.push(i);
			}
		}
	},
	methods: {
		bindChange(e) {
			
			this.year = this.years[e.target.value[0]];
			this.Month = this.months[e.target.value[1]];
			this.Date = this.days[e.target.value[2]];
			this.Hour = this.Hours[e.target.value[3]];
			this.Minute = this.Minutes[e.target.value[4]];
			this.yue = this.months[e.target.value[1]];
			//console.log(this.year,this.Month,this.Date,this.Hour,this.Minute)
			this.value1 = [
				e.target.value[0],
				e.target.value[1],
				e.target.value[2],
				e.target.value[3],
				e.target.value[4]
			];
			this.days = [];
			this.tianS = new Date(this.year, this.yue, 0).getDate();
			for (let i = 1; i < this.tianS + 1; i++) {
				this.days.push(i);
			}
			this.dqshijian =   this.year+'年'+this.Month+'月'+this.Date+'日'+this.Hour+'时'+this.Minute+'分'
			var getSystemType = wx.getSystemInfoSync();
			if(getSystemType.platform == "android"){
				this.shiJc = this.year+'-'+this.Month+'-'+this.Date+' '+this.Hour+':'+this.Minute
			}else{
				this.shiJc = this.year+'/'+this.Month+'/'+this.Date+' '+this.Hour+':'+this.Minute
			}
		},
		queD(){
			this.$emit('dsplay1',[0,this.dqshijian,this.message,Date.parse(this.shiJc)/1000]);
		},
		quX(){
			this.$emit('dsplay2',0);
		},
		
	},
	mounted() {
		//要让它加载完成在执行默认生效
		this.value1 = [
		this.years.indexOf(this.year),
		this.months.indexOf(this.Month),
		this.days.indexOf(this.Date),
		this.Hours.indexOf(this.Hour),
		this.Minutes.indexOf(this.Minute)
		];
		this.evieHeight = wx.getSystemInfoSync().windowHeight + "px";
	}
};
</script>

<style>
.shiJbox{
    /* background-color: white; */
    position: absolute;
    z-index: 20;
    bottom: 0;
    text-align: center;
}
.shiJ{
    border-top: 2rpx solid rgba(158, 155, 155, 0.801);
    background-color: white;
}
.tis{
    border-bottom: 2rpx solid rgba(158, 155, 155, 0.801);
    line-height: 90rpx;
    text-align: center;
    overflow: hidden;
	display: flex;
}

 .tis>div{
    float: left;
    width: 375rpx;
 } 
.tis>div:nth-of-type(2){
    /* border-left: 2rpx solid rgba(158, 155, 155, 0.801); */
    box-sizing: border-box;
}
.mask{
	width: 100%;
	height: 200%;
	background-color: black;
	opacity: .3;
}
.sure,.cancel{
	width: 50%;
	font-size: 32rpx;
	color: #999999FF;
	border-top: none;
	
}
.sure{
	text-align: right;
	padding-right: 64rpx;
}
.cancel{
	text-align: left;
	padding-left: 32rpx;
}
</style>
